<template>
  <div class="user-activity">
    <div class="chat-list">
      <el-badge v-for="(item,index2) in unReadList" :key="index2" :hidden="item.num <= 0" :value="item.num" class="item">
        <div class="chat-item" @click="toChat(item.message.group.name)">
          <div class="chat-item-left">
            <el-avatar :size="70" :src="item.message.sender.avatar" />
          </div>
          <div class="chat-item-right text-info">
            <div class="chat-item-user-info">
              <div v-if="item.message.group.users != null && item.message.group.users.length > 1" class="chat-item-user-name text-primary" style="font-size: 18px">
                {{ item.message.group.users['0'].id === $store.getters.id ? item.message.group.users['1'].name !== null ? $store.getters.id ? item.message.group.users['1'].name : $store.getters.id ? item.message.group.users['1'].username  : item.message.group.users['0'].name != null : item.message.group.users['0'].name : item.message.group.users['0'].username }}
              </div>
              <div v-else-if="item.message.group.users != null" class="chat-item-user-name text-primary" style="font-size: 18px">
                {{ item.message.group.users['0'].name }}
              </div>
              <!--                      <div class="chat-item-user-org text-success" style="font-size: 15px">-->
              <!--                        {{ item.org }}-->
              <!--                      </div>-->
            </div>

            {{ item.message.sender.name + ':' +item.message.content }}
          </div>
        </div>
      </el-badge>
      <div v-if="unReadList === null || unReadList.length <= 0" class="text-info" style="font-weight: bold">暂无动态</div>
    </div>
  </div>
</template>

<script>
import { getHistory, getUnReadList } from '@/api/inform'
import { parseTime} from '@/utils'

export default {
  data() {
    return {
      listQuery: {
        limit: 7,
        page: 0
      },
      unReadList: []
    }
  },
  mounted() {
    this.getUnReadList()
  },
  methods: {
    toChat(name) {
      getHistory({ page: 0, limit: 5, groupName: name }).then(
        (res) => {
          console.log(res)
          this.getUnReadList()
          this.$router.push({ path: '/inform/p2p/' + name + '/' + new Date().getTime() })
        }
      )
    },
    getUnReadList() {
      this.listQuery.page++
      const form = Object.assign({}, this.listQuery)
      getUnReadList(form).then(
        res => {
          console.log(res)
          for (const i in res.data.items) {
            const item = res.data.items[i]
            item.message.createTime = new Date(item.message.createTime)
            this.unReadList.push(item)
            console.log(item)
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.user-activity{
  height: calc( 100vh - 270px);
}
.chat-list{
  .item{
    width: calc(100% - 30px);
    margin: 20px 10px 0 0;
  }
  .chat-item{
    border: 1px solid #919499;
    padding: 10px;
    height: 95px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
    .chat-item-left{
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 90px;
    }
    .chat-item-right{
      width: calc(100% - 300px);
      overflow: hidden;
      text-overflow:ellipsis;
    }
    &:hover{
      background-color: #e8ebf1;
      cursor:pointer;
    }
    &:active{
      background-color: #e2e5eb;
    }
  }
}
</style>
